
@font-face {
    font-family: 'HWZhongSong';
    src: url('../../font/华文中宋.TTF');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'tttgbnumber';
    src: url('../../font/tttgbnumber.ttf');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}
body {
    font-size: 16px;
    color:#FFF;
    font-family: 'tttgbnumber';
    transform: scale(1.60);
    transform-origin: 0 0;
}
.container{
    width: 480px;
    height: 300px;
    background-repeat: no-repeat;
    position: relative;
    background-color: #1234;
}
.role_box{
    width: 480px;
    padding: 5px 10px;
    height: 300px;
    background-repeat: no-repeat;
}
.title_box{
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
}
.title{
    font-size: 36px;
    display: flex;
    align-items: flex-end;
}
.role_name{
    font-family: 'HWZhongSong';
}
.lv{

    font-size: 16px;
    margin-left: 5px;
    margin-bottom: 2px;
}
.uid{
    margin-left: 3px;
}
.title_right{
    display: flex;
}
.title_right .item{
    margin-bottom: 2px;
    margin-left: 15px;
}
.detail{
    margin-left: 5px;
    width: 300px;
    margin-top:3px;
    padding: 5px 0;
    display: flex;
    position: relative;
}
.detail::before{
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
    width: 0%;
    height: 1px;
    top: 0;
    left: -15px;
    width: 300px;
    opacity: 1;
    transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.detail::after{
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
    width: 0%;
    height: 1px;
    bottom: 0;
    left: -15px;
    width: 300px;
    opacity: 1;
    transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.detail p{
    margin-right:10px;
    line-height: 20px;
}
.star{
    width: 16px;
    vertical-align: -2px;
    margin-right: 1px;
}
.equiv{
    margin-top: 12px;
    min-height: 120px;
}
.row{
    width: 240px;
    display: flex;
    flex-wrap:wrap ;
    /*margin-bottom: 5px;*/
}
.row .item{
    margin: 0 10px 8px 10px;
    text-align: center;
    font-size: 20px;
    padding: 3px;
    background: rgba(0,0,0,.6);
    border-radius:5px;
    height: 52px;
    width: 52px;
    position:relative;
}
.row .item .num{
    position: absolute;
    top: -4px;
    right: -7px;
    font-size: 12px;
    /*background: rgba(0,0,0,.6);*/
    border-radius: 5px;
    padding: 1px 5px;
    background-color: rgba(0, 0, 0, var(--bg-opacity));
    --bg-opacity: 0.75;
    border-radius: 9999px;
}
.weapon_num{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    /*background: #ff4d4d;
    background: rgba(0,0,0,.6);*/
    border-radius:5px;
    padding: 1px 3px;
    background-color: rgba(0, 0, 0, var(--bg-opacity));
    --bg-opacity: 0.75;
}
.row .item .img_box{
    width: 46px;
    height: 46px;
    border: 1px solid #d3bc8d;
    border-radius:5px;
    overflow: hidden;
}
.row .item img{
    width: 100%;
    transform: scale(1.2, 1.2);    
}
.equiv_info{
    max-width: 410px;
    display: inline-block;
    font-size: 15px;
    padding: 5px 5px 1px 7px;
    border-radius: 10px;
    background: linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),rgba(114,102,104,.3);
    margin-left: 5px;
}
.equiv_info .text{
    margin-bottom: 5px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.温迪_bg1{
    background-image: url(../logo/bg/温迪1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
    
}
.温迪_bg2{
    background-image: url(../logo/bg/温迪2.png);
    background-size: 100%;
    background-position: 133px 0px;
}
.阿贝多_bg1{
    background-image: url(../logo/bg/阿贝多1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
    
}
.阿贝多_bg2{
    background-image: url(../logo/bg/阿贝多2.png);
    background-size: 100%;
    background-position: -15px 0px;
}
.安柏_bg1{
    background-image: url(../logo/bg/安柏1.png);
    background-size: auto  100%;
    /* background-position: 100% 0%; */
}
.安柏_bg2{
    background-image: url(../logo/bg/安柏2.png);
    background-size: 100%;
    background-position: 140px 0px;
}
.芭芭拉_bg1{
    background-image: url(../logo/bg/芭芭拉1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.芭芭拉_bg2{
    background-image: url(../logo/bg/芭芭拉2.png);
    background-size: 100%;
    background-position: 50px 27px;
}
.芭芭拉_bg3{
    background-image: url(../logo/bg/芭芭拉3.png);
    background-size: 100%;
    background-position: 65px 10px;
}
.班尼特_bg1{
    background-image: url(../logo/bg/班尼特1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.班尼特_bg2{
    background-image: url(../logo/bg/班尼特2.png);
    background-size: 100%;
    background-position: -5px 0px;
}
.迪奥娜_bg1{
    background-image: url(../logo/bg/迪奥娜1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.迪奥娜_bg2{
    background-image: url(../logo/bg/迪奥娜2.png);
    background-size: 100%;
    background-position: 40px 10px;
}
.迪卢克_bg1{
    background-image: url(../logo/bg/迪卢克1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.迪卢克_bg2{
    background-image: url(../logo/bg/迪卢克2.png);
    background-size: 100%;
    background-position: 40px 10px;
}
.菲谢尔_bg1{
    background-image: url(../logo/bg/菲谢尔1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.菲谢尔_bg2{
    background-image: url(../logo/bg/菲谢尔2.png);
    background-size: 100%;
    background-position: 90px 0px;
}
.凯亚_bg1{
    background-image: url(../logo/bg/凯亚1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.凯亚_bg2{
    background-image: url(../logo/bg/凯亚2.png);
    background-size: 100%;
    background-position: 90px 5px;
}
.可莉_bg1{
    background-image: url(../logo/bg/可莉1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.可莉_bg2{
    background-image: url(../logo/bg/可莉2.png);
    background-size: 100%;
    background-position: 10px 0px;
}
.雷泽_bg1{
    background-image: url(../logo/bg/雷泽1.png);
    background-size: auto  100%;
    background-position: 37% 0%;
}
.雷泽_bg2{
    background-image: url(../logo/bg/雷泽2.png);
    background-size: 100%;
    background-position: 120px 0px;
}
.丽莎_bg1{
    background-image: url(../logo/bg/丽莎1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.丽莎_bg2{
    background-image: url(../logo/bg/丽莎2.png);
    background-size: 100%;
    background-position: 10px 0px;
}
.莫娜_bg1{
    background-image: url(../logo/bg/莫娜1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.莫娜_bg2{
    background-image: url(../logo/bg/莫娜2.png);
    background-size: 100%;
    background-position: 55px 0px;
}
.诺艾尔_bg1{
    background-image: url(../logo/bg/诺艾尔1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.诺艾尔_bg2{
    background-image: url(../logo/bg/诺艾尔2.png);
    background-size: 100%;
    background-position: 15px 0px;
}
.琴_bg1{
    background-image: url(../logo/bg/琴1.png);
    background-size: auto  100%;
    /*background-position: 100% 0%;*/
}
.琴_bg2{
    background-image: url(../logo/bg/琴2.png);
    background-size: 100%;
    background-position: 50px 0px;
}
.琴_bg3{
    background-image: url(../logo/bg/琴3.png);
    background-size: 110%;
    background-position: 80px 0px;
}
.砂糖_bg1{
    background-image: url(../logo/bg/砂糖1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.砂糖_bg2{
    background-image: url(../logo/bg/砂糖2.png);
    background-size: 100%;
    background-position: -10px 0px;
}
.北斗_bg1{
    background-image: url(../logo/bg/北斗1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.北斗_bg2{
    background-image: url(../logo/bg/北斗2.png);
    background-size: 100%;
    background-position: 100px 0px;
}
.达达利亚_bg1{
    background-image: url(../logo/bg/达达利亚1.png);
    background-size: auto  100%;
    background-position: 40% 0%;
}
.达达利亚_bg2{
    background-image: url(../logo/bg/达达利亚2.png);
    background-size: 100%;
    background-position: 60px 0px;
}
.甘雨_bg1{
    background-image: url(../logo/bg/甘雨1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.甘雨_bg2{
    background-image: url(../logo/bg/甘雨2.png);
    background-size: 100%;
    background-position: 90px 0px;
}
.甘雨_bg3{
    background-image: url(../logo/bg/甘雨3.png);
    background-size: 100%;
    background-position: 20px 0px;
}
.行秋_bg1{
    background-image: url(../logo/bg/行秋1.png);
    background-size: auto  100%;
    background-position: 100% 0%;
}
.行秋_bg2{
    background-image: url(../logo/bg/行秋2.png);
    background-size: 100%;
    background-position: 0px 0px;
}
.胡桃_bg1{
    background-image: url(../logo/bg/胡桃1.png);
    background-size: auto 100%;
    background-position: 34% 0%;
}
.胡桃_bg2{
    background-image: url(../logo/bg/胡桃2.png);
    background-size: 100%;
    background-position: 95px 0px;
}
.刻晴_bg1{
    background-image: url(../logo/bg/刻晴1.png);
    background-size: auto 100%;
}
.刻晴_bg2{
    background-image: url(../logo/bg/刻晴2.png);
    background-size: 105%;
    background-position: 87px -15px;
}
.刻晴_bg3{
    background-image: url(../logo/bg/刻晴3.png);
    background-size: 105%;
    background-position: 87px 0px;
}
.凝光_bg1{
    background-image: url(../logo/bg/凝光1.png);
    background-size: auto 100%;
    /*background-position: 34% 0%;*/
}
.凝光_bg2{
    background-image: url(../logo/bg/凝光2.png);
    background-size: 100%;
    background-position: 140px 0px;
}
.凝光_bg3{
    background-image: url(../logo/bg/凝光3.png);
    background-size: 100%;
    background-position: 60px 0px;
}
.七七_bg1{
    background-image: url(../logo/bg/七七1.png);
    background-size: auto 100%;
}
.七七_bg2{
    background-image: url(../logo/bg/七七2.png);
    background-size: 100%;
    background-position: 25px 0px;
}
.香菱_bg1{
    background-image: url(../logo/bg/香菱1.png);
    background-size: auto 100%;
    background-position: 34% 0%;
}
.香菱_bg2{
    background-image: url(../logo/bg/香菱2.png);
    background-size: 100%;
    background-position: 5px 0px;
}
.魈_bg1{
    background-image: url(../logo/bg/魈1.png);
    background-size: auto 100%;
    background-position: 65% 0%;
}
.魈_bg2{
    background-image: url(../logo/bg/魈2.png);
    background-size: 100%;
    background-position: 30px 0px;
}
.魈_bg3{
    background-image: url(../logo/bg/魈3.png);
    background-size: 100%;
    background-position: 40px 0px;
}
.辛焱_bg1{
    background-image: url(../logo/bg/辛焱1.png);
    background-size: auto 100%;
    background-position: 42% 0%;
}
.辛焱_bg2{
    background-image: url(../logo/bg/辛焱2.png);
    background-size: 100%;
    background-position: 100px 0px;
}
.钟离_bg1{
    background-image: url(../logo/bg/钟离1.png);
    background-size: auto 100%;
    background-position: 95% 0%;
}
.钟离_bg2{
    background-image: url(../logo/bg/钟离2.png);
    background-size: 100%;
    background-position: -35px 0px;
}
.重云_bg1{
    background-image: url(../logo/bg/重云1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.重云_bg2{
    background-image: url(../logo/bg/重云2.png);
    background-size: 100%;
    background-position: 100px 0px;
}
.罗莎莉亚_bg1{
    background-image: url(../logo/bg/罗莎莉亚1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.罗莎莉亚_bg2{
    background-image: url(../logo/bg/罗莎莉亚2.png);
    background-size: 100%;
    background-position: 120px 0px;
}
.空_bg1{
    background-image: url(../logo/bg/空1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.空_bg2{
    background-image: url(../logo/bg/空2.png);
    background-size: 100%;
    background-position: 30px 0px;
}
.荧_bg1{
    background-image: url(../logo/bg/荧1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.荧_bg2{
    background-image: url(../logo/bg/荧2.png);
    background-size: 100%;
    background-position: 30px 15px;
}
.烟绯_bg1{
    background-image: url(../logo/bg/烟绯1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.烟绯_bg2{
    background-image: url(../logo/bg/烟绯2.png);
    background-size: 100%;
    background-position: 140px 0px;
}
.优菈_bg1{
    background-image: url(../logo/bg/优菈1.png);
    background-size: auto 100%;
    background-position: 0% 0%;
}
.优菈_bg2{
    background-image: url(../logo/bg/优菈2.png);
    background-size: 100%;
    background-position: 80px 0px;
}
.枫原万叶_bg1{
    background-image: url(../logo/bg/枫原万叶1.png);
    background-position: 10% 0%;
    background-size: auto 100%;
}
.枫原万叶_bg2{
    background-image: url(../logo/bg/枫原万叶2.png);
    background-size: 100%;
    background-position: 100px 0px;
}
.神里绫华_bg1{
    background-image: url(../logo/bg/神里绫华1.png);
    background-size: auto 100%;
    background-position: 85% 0%;
}
.神里绫华_bg2{
    background-image: url(../logo/bg/神里绫华2.png);
    background-size: 100%;
    background-position: 0px 0px;
}
.宵宫_bg1{
    background-image: url(../logo/bg/宵宫1.png);
    background-size: auto 100%;
    background-position: 34% 0%;
}
.宵宫_bg2{
    background-image: url(../logo/bg/宵宫2.png);
    background-size: 100%;
    background-position: 60px 0px;
}
.早柚_bg1{
    background-image: url(../logo/bg/早柚1.png);
    background-size: auto 100%;
    background-position: 8% 0%;
}
.早柚_bg2{
    background-image: url(../logo/bg/早柚2.png);
    background-size: 100%;
    background-position: 110px 0px;
}
.雷电将军_bg1{
    background-image: url(../logo/bg/雷电将军1.png);
    background-size: auto 100%;
    background-position: 15% 0%;
}
.雷电将军_bg2{
    background-image: url(../logo/bg/雷电将军2.png);
    background-size: 100%;
    background-position: 110px 0px;
}
.九条裟罗_bg1{
    background-image: url(../logo/bg/九条裟罗1.png);
    background-size: auto 100%;
    background-position: 44% 0%;
}
.九条裟罗_bg2{
    background-image: url(../logo/bg/九条裟罗2.png);
    background-size: 100%;
    background-position: 0px 0px;
}
.埃洛伊_bg1{
    background-image: url(../logo/bg/埃洛伊1.png);
    background-size: auto 100%;
    background-position: 0% 0%;
}
.埃洛伊_bg2{
    background-image: url(../logo/bg/埃洛伊2.png);
    background-size: 100%;
    background-position: 60px 0px;
}
.珊瑚宫心海_bg1{
    background-image: url(../logo/bg/珊瑚宫心海1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.珊瑚宫心海_bg2{
    background-image: url(../logo/bg/珊瑚宫心海2.png);
    background-size: 100%;
    background-position: 100px 0px;
}
.托马_bg1{
    background-image: url(../logo/bg/托马1.png);
    background-size: auto 100%;
    background-position: 34% 0%;
}
.托马_bg2{
    background-image: url(../logo/bg/托马2.png);
    background-size: 100%;
    background-position: 110px 0px;
}
.荒泷一斗_bg1{
    background-image: url(../logo/bg/荒泷一斗1.png);
    background-size: auto 100%;
    background-position: 0% 0%;
}
.荒泷一斗_bg2{
    background-image: url(../logo/bg/荒泷一斗2.png);
    background-size: 100%;
    background-position: 150px 0px;
}
.五郎_bg1{
    background-image: url(../logo/bg/五郎1.png);
    background-size: auto 100%;
    background-position: 100% 0%;
}
.五郎_bg2{
    background-image: url(../logo/bg/五郎2.png);
    background-size: 100%;
    background-position: 110px 0px;
}
.申鹤_bg1{
    background-image: url(../logo/bg/申鹤1.png);
    background-size: auto 100%;
    background-position: 0% 0%;
}
.申鹤_bg2{
    background-image: url(../logo/bg/申鹤2.png);
    background-size: 100%;
    background-position: 40px 0px;
}
.云堇_bg1{
    background-image: url(../logo/bg/云堇1.png);
    background-size: auto 100%;
    background-position: 40% 0%;
}
.云堇_bg2{
    background-image: url(../logo/bg/云堇2.png);
    background-size: 100%;
    background-position: 50px 0px;
}
.八重神子_bg1{
    background-image: url(../logo/bg/八重神子1.png);
    background-size: auto 100%;
    background-position: 10% 0%;
}
.八重神子_bg2{
    background-image: url(../logo/bg/八重神子2.png);
    background-size: 100%;
    background-position: 35px 0px;
}